MDX 学习

Getting Start

Docusaurus 中定义一个高亮语法模块

创建一个高亮组件，并导出。

@site/src/components/MyMDX.js

import React from "react"

export default function Highlight({ children, color }) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: "2px",
        color: "#fff",
        padding: "0.2rem",
      }}>
      {children}
    </span>
  )
}

在 MDX 或 MD 文件中引入，并使用。

import { Highlight } from "@src/components/MyMDX"

这句话使用了<Highlight color="#1877F2"> MDX 高亮组件</Highlight>。

🎈 效果如下：

这句话使用了 MDX 高亮组件。

官方文档:https://docusaurus.io/zh-CN/docs/markdown-features/react